
<!doctype html>
<html lang="en">

<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Hi-dialect</title>
   <link rel="stylesheet" href="css/style.css">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
</head>

<body>

    <!-- Page loading -->
    <div class="loading">
        <div class="spinner-grow"></div>
    </div>
    <!-- * Page loading -->
    <!-- App Header -->
    <div class="appHeader">
        <div class="left">
            <a href="javascript:;" class="icon goBack">
                <i class="icon ion-ios-arrow-back"></i>
            </a>
        </div>
        <div class="pageTitle">视频库</div>
        <div class="right">
            <label for="searchInput" class="mb-0 icon toggleSearchbox">
                <i class="icon ion-ios-search"></i>
            </label>
        </div>
    </div>
    <!-- searchBox -->
    <div class="searchBox">
        <form>
            <span class="inputIcon">
                <i class="icon ion-ios-search"></i>
            </span>
            <input type="text" class="form-control" id="searchInput" placeholder="请输入...">
            <a href="javascript:;" class="toggleSearchbox closeButton">
                <i class="icon ion-ios-close-circle"></i>
            </a>
        </form>
    </div>
    <!-- * searchBox -->
    <!-- * App Header -->
    <!-- App Capsule -->
    <div id="appCapsule">

        <div class="appContent">
            

            <!-- Button Carousel -->
            <div class="buttonCarousel owl-carousel mt-2">
                <div class="item">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/product1.jpg" alt="image">
                        </div>
                        <strong>东北话</strong>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/product2.jpg" alt="image">
                        </div>
                        <strong>陕西话</strong>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/product3.jpg" alt="image">
                        </div>
                        <strong>上海话</strong>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/product4.jpg" alt="image">
                        </div>
                        <strong>四川话</strong>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/product5.jpg" alt="image">
                        </div>
                        <strong>浙江话</strong>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/product6.jpg" alt="image">
                        </div>
                        <strong>安徽话</strong>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="imgWrapper">
                            <img src="img/sample/product7.jpg" alt="image">
                        </div>
                        <strong>藏语</strong>
                    </a>
                </div>
            </div>
            <!-- Button Carousel -->

            <div class="divider mt-2 mb-2"></div>

           <div class="itemList">
               <div class="item">
                   <div class="image">
                       <img src="img/sample/photo14.jpg" alt="image">
                   </div>
                   <div class="text">
                       <h4 class="title">大田后生仔</h4>
                       <div class="text-muted">“做人一辈子，快乐没几天</div>
           			<h2 class="text-muted">12.7万使用</h2>
                   </div>
               </div>
               <div class="item">
                   <div class="image">
                       <img src="img/sample/photo13.jpg" alt="image">
                   </div>
                   <div class="text">
                       <h4 class="title">浮夸</h4>
                       <div class="text-muted">“别遗忘有人在为你声沙</div>
           			<h2 class="text-muted">9.7万使用</h2>
                   </div>
               </div>
               <div class="item">
                   <div class="image">
                       <img src="img/sample/photo4.jpg" alt="image">
                   </div>
                   <div class="text">
                       <h4 class="title">白玫瑰</h4>
                       <div class="text-muted">“白如白牙热情被吞噬</div>
           			<h2 class="text-muted">9.4万使用</h2>
                   </div>
               </div>
			   <div class="item">
			       <div class="image">
			           <img src="img/sample/photo5.jpg" alt="image">
			       </div>
			       <div class="text">
			           <h4 class="title">野孩子</h4>
			           <div class="text-muted">“明知我这种男孩子</div>
			              			<h2 class="text-muted">9.4万使用</h2>
			       </div>
			   </div>
			   <div class="item">
			       <div class="image">
			           <img src="img/sample/photo1.jpg" alt="image">
			       </div>
			       <div class="text">
			           <h4 class="title">苦瓜</h4>
			           <div class="text-muted">“大概今生有些事，是提早都不可以明白其妙处</div>
			              			<h2 class="text-muted">9.4万观看.04-15</h2>
			       </div>
			   </div>
           </div>
            <!-- * listview -->
            

        </div>

    </div>
    <!-- appCapsule -->
    
    <!-- App Bottom Menu -->
    <div class="appBottomMenu">
        <div class="item">
            <a href="homepage.html">
                <p>
                    <i class="icon ion-ios-water"></i>
                    <span>首页</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="activitiy-main.html">
                <p>
                    <i class="icon ion-ios-apps"></i>
                    <span>活动</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="tools.html">
                <p>
                    <i class="icon ion-ios-add-circle"></i>
                    <span>工具</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="social-home.html">
                <p>
                    <i class="icon ion-ios-aperture"></i>
                    <span>动态</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="people-info.html">
                <p>
                    <i class="icon ion-ios-person"></i>
                    <span>我的</span>
                </p>
            </a>
        </div>
    </div>
    <!-- * App Bottom Menu -->
    
	
	<!-- Sidebar Menu -->
	<div class="sidebarWrapper">
	    <div class="overlay toggleSidebar"></div>
	    <nav class="sidebar">
	        <div class="profilebox">
	            <img src="img/sample/avatar.jpg" alt="avatar" class="avatar">
	            <h2 class="title">醒了很久还是很感动</h2>
	            <h5 class="lead">
	                <i class="icon ion-ios-pin mr-1"></i>
	                上海市
	            </h5>
	            <div class="button">
	                <a href="#">
	                    <i class="icon ion-ios-settings"></i>
	                </a>
	            </div>
	        </div>
	        <div class="sidebarGroup">
	            <ul class="sidebarMenu">
	                <li>
	                    <a href="social-home.html">
	                        <i class="icon ion-ios-people"></i>
	                        动态
	                    </a>
	                </li>
	                <li>
	                    <a href="social-chat.html">
	                        <i class="icon ion-ios-chatboxes"></i>
	                        消息
	                    </a>
	                </li>
	                <li>
	                    <a href="activitiy-list.html">
	                        <i class="icon ion-ios-apps"></i>
	                        活动
	                    </a>
	                </li>
	                <li>
	                    <a href="people-info.html">
	                        <i class="icon ion-ios-book"></i>
	                        信息
	                    </a>
	                </li>
	                <li>
	                    <a href="page-login.html">
	                        <i class="icon ion-ios-lock"></i>
	                        登出
	                    </a>
	                </li>
	            </ul>
	        </div>
	        <div class="sidebarGroup">
	            <ul class="sidebarMenu">
	                <li class="title">在线</li>
	                <li>
	                    <a href="social-chat.html">
	                        <img src="img/sample/avatar2.jpg" alt="avatar" class="avatar">
	                        胖大海
	                    </a>
	                </li>
	                <li>
	                    <a href="social-chat.html">
	                        <img src="img/sample/avatar3.jpg" alt="avatar" class="avatar">
	                        佛山菩提
	                        <span class="badge badge-primary">2</span>
	                    </a>
	                </li>
	                <li>
	                    <a href="social-chat.html">
	                        <img src="img/sample/avatar4.jpg" alt="avatar" class="avatar">
	                        刘小佳
	                    </a>
	                </li>
	                <li>
	                    <a href="social-chat.html">
	                        <img src="img/sample/avatar5.jpg" alt="avatar" class="avatar">
	                        张铁柱
	                    </a>
	                </li>
	                <li>
	                    <a href="social-chat.html">
	                        <img src="img/sample/avatar6.jpg" alt="avatar" class="avatar">
	                        方言小李
	                    </a>
	                </li>
	            </ul>
	        </div>
	
	    </nav>
	</div>
	<!-- * Sidebar Menu -->
  <!-- ///////////// Js Files ////////////////////  -->
  <!-- Jquery -->
  <script src="js/lib/jquery-3.4.1.min.js"></script>
  <!-- Bootstrap-->
  <script src="js/lib/popper.min.js"></script>
  <script src="js/lib/bootstrap.min.js"></script>
  <!-- Owl Carousel -->
  <script src="js/plugins/owl.carousel.min.js"></script>
  <!-- Main Js File -->
  <script src="js/app.js"></script>
</body>

</html>